<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="m.jd.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/base2013.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/my.css?r=2" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/header.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/product.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/input.css" charset="gbk" />
    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/self.js?r=1"></script>

    <style type="text/css">
        .norm-div{
            background: #fff;
            padding: 10px;
            border-radius: 10px;
        }
        .norm-div .price{
            width: 100px;
            height: 25px;
            border-width:1px;
            line-height:normal;
        }
        [priceType]{
            background: #fff;
            padding: 10px;
            border-radius: 10px;
        }
        button{
            background: #00aeef;
            width: 100px;
            height: 50px;
            border: none;
        }
        .price{
            width: 100px;
        }

    </style>
</head>
<body>

<header>
    <!-- 通用头 div -->
    <div id="m_common_header" style="min-height: 45px; margin-top: 0px;">
        <header class="jd-header">
            <div class="jd-header-bar">
                <div  class="jd-header-icon-back J_ping" onclick="javascript:window.location.href='/html/wap/supplier/user_center.html'">
                    <span></span>
                </div>
                <div class="jd-header-title">
                    未经营商品
                </div>
            </div>

        </header>
    </div>
</header>
<div class="common-wrapper" id="mainLayout">

    <input name="productId" type="hidden">
    <div id="div_orderlist" class="product-div">
        <div class="product-title" style=" background: #fff;padding: 10px; border-radius: 10px" >
            <div style="width:40%;float:left;background-color: #fff;border-radius:15px;padding: 8px 10px;">
                <img name="image" style="width:100%;" src="">
            </div>
            <div style="width:56%;float: left;margin-left:4%;">
                <span name="name" class="product" style="display: block"></span>
                <span name="code" class="product" style="display: block;"></span>
            </div>
        </div>
        <div style="margin-top:20px">
            <textarea  style="width:100%;border-radius:3px;border:1px solid #ddd;" disabled name="content" class="product"></textarea>
        </div>
        <div>
            <label>价格类型</label>
            <select name="priceType" style="height:30px;" >
                <option value="same"> 全部统一价格</option>
                <option value="level">按客户级别统一</option>
                <option value="norm">按规格统一</option>
                <option value="normLevel">按规格客户级别</option>
            </select>
        </div>

        <div priceType ="same">
            <lable>统一价格:</lable><input type='text' name="price" value="0"/>
        </div>
        <div priceType = "level" style="display:none">

        </div>
        <div priceType = "norm" style="display:none">

        </div>
        <div priceType="normLevel" style="display:none">

        </div>
        <!--end if-->
    </div>
    <div style="text-align: center;">
        <button onclick="save()">
            保存
        </button>
        <button onclick="goBack()">
            取消
        </button>
    </div>


</div>
</body>
<script type="text/javascript">

    $().ready(function () {
        var productId =  getUrlParam("productId");
        if(!isNullOrUndefined(productId)){
            $("[name='productId']").val(productId);
        }

        loadData();
        bindPriceChange();
    });
    function bindPriceChange() {
        $("[name='priceType']").change(function () {
            var priceType = $(this).find("option:selected").val();
            $("[priceType]").hide();
            $("[priceType='"+priceType+"']").show();
        });
    }
    function loadData(){
        var productId =  getUrlParam("productId");
        $.ajax({
            url:"/wap/supplier/product/queryProductConfig.do",
            data:{'productId':productId},
            type:'post',
            dataType:'json',
            success:function(data){
                console.log(data);
                if(data.success){
                    initPageDate(data.data.product, '.product');
                    $("[name='image']").attr("src",data.data.product.image);
                    var norm =  data.data.productNorm;
                    var levels = data.data.levels;
                    var canDiffByNorm = false;
                    var canDiffByLevel = false;
                    var supplierProduct =  data.data.supplierProduct;

                    if(!isNullOrUndefined(norm)){
                        canDiffByNorm = true;
                    }else {
                        $("option[value='norm']").remove();
                        $("option[value='normLevel']").remove();
                    }

                    if(!isNullOrUndefined(levels)){
                        canDiffByLevel = true;
                    }else {
                        $("option[value='level']").remove();
                        $("option[value='normLevel']").remove();
                    }
                    if(canDiffByNorm && canDiffByLevel){
                        var normName = norm.name;
                        var norms = norm.values.split(",");
                        $(norms).each(function (index,_norm) {
                            var html = "<div class='norm-div'><div>"+normName+":"+_norm+"</div><div name='div-"+_norm+"'></div></div>";
                            $("[priceType='normLevel']").append(html+ "<div style='height:10px;'></div>");
                            bindPriceForLevel(_norm,levels);
                        })
                    }
                    if(canDiffByNorm){
                        var normName = norm.name;
                        var norms = norm.values.split(",");
                        var html = "";
                        $(norms).each(function (index,_norm){
                            html = html+ "<div style='height:30px;'>"+
                                "<lable>"+_norm+"&nbsp;&nbsp;价格:</lable><input type='text' class='price norm-diff'  norm='"+_norm+"'  >"
                                +"</div>"
                            ;
                        });
                        $("[priceType='norm']").append(html+ "<div style='height:10px;'></div>");
                    }
                    if(canDiffByLevel){
                        var html = "";
                        $(levels).each(function (index,item) {
                            html = html+ "<div style='height:30px;'>"+
                                "<lable>"+item.name+"&nbsp;&nbsp;价格:</lable><input type='text' class='price level-diff'  norm='"+norm+"' level-id='"+
                                item.id+"' >"
                                +"</div>"
                            ;
                        });
                        $("[priceType='level']").append(html+ "<div style='height:10px;'></div>");
                    }
                    //根据配置数据显示
                    fillPrice(supplierProduct);
                    
                }
            }
        });
    }

    function save() {
        var params = {};
        params["productId"] = $("[name='productId']").val();
        var priceType = $("[name='priceType']").val();
        params["priceType"] = priceType;

        if(priceType =='same'){
            var priceConfig = {};
            var price = $("[name='price']").val();
            priceConfig = {"price":price};
            params["configJson"]= JSON.stringify(priceConfig);

        }else  if(priceType =='norm'){
            var priceConfig= [];
            $(".norm-diff").each(function () {
                var norm =  $(this).attr("norm");
                var price = $(this).val();
                priceConfig.push({"norm":norm,"price":price});
            });
            params["configJson"]= JSON.stringify(priceConfig);
        }else if(priceType =='level'){
            var priceConfig = [];
            $(".level-diff").each(function () {
                var level = $(this).attr("level-id");
                var price = $(this).val();
                priceConfig.push({"level":level,"price":price});
            });
            params["configJson"]=  JSON.stringify(priceConfig);
        }else if(priceType =='normLevel'){
            var priceConfig = [];
            $(".norm-level-diff").each(function () {
                var level = $(this).attr("level-id");
                var norm = $(this).attr("norm");
                var price = $(this).val();
                priceConfig.push({"norm":norm,"level":level,"price":price});
            });
            params["configJson"]= JSON.stringify(priceConfig);
        }
        $.ajax({
            url: "/wap/supplier/product/save.do",
            data: params,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                console.log(data);
                if (data.success) {
                    alert("保存成功");
                    goBack();
                    /*pageGoto("my_customer_list.html");*/
                } else {
                    alert(data.msg);
                }
            }
        });

    }
    function editCustomerLevel(id) {
        window.location.href="my_customer_edit.html?id="+id;
    }
    
    function bindPriceForLevel(norm,levelList) {
        var html = "";
        $(levelList).each(function (index,item) {
            html = html+ "<div style='height:30px;'>"+
                "<lable>"+item.name+"&nbsp;&nbsp;价格:</lable><input type='text' class='price norm-level-diff'  norm='"+norm+"' level-id='"+
                item.id+"' >"
            +"</div>"
           ;
        });
        $("[name='div-"+norm+"']").html(html);
    }
    function fillPrice(supplierProduct) {
        if(!isNullOrUndefined(supplierProduct)){
            var priceType =supplierProduct.priceType;
            $("[name='priceType']").val(supplierProduct.priceType);
            $("[priceType]").hide();
            $("[priceType='"+supplierProduct.priceType+"']").show();
            var priceConfig = JSON.parse(supplierProduct.configJson);
            if(priceType =='same'){               
                $("[name='price']").val(priceConfig.price);

            }else  if(priceType =='norm'){
                $(priceConfig).each(function (index,item) {
                   var  norm = item.norm;
                   var price = item.price;
                   $(".norm-diff[norm='"+norm+"']").val(price);
                });
            }else if(priceType =='level'){
                $(priceConfig).each(function (index,item) {
                    var level = item.level;
                    var price = item.price;
                    $(".level-diff[level-id='"+level+"']").val(price);
                });
            }else if(priceType =='normLevel'){
                $(priceConfig).each(function (index,item) {
                    var  norm = item.norm;
                    var level = item.level;
                    var price = item.price;
                    $(".norm-level-diff[norm='"+norm+"'][level-id='"+level+"']").val(price);
                });
            }
        }

    }
    function goBack() {
        window.history.back();
    }
</script>
</html>